<template>
	<view class="verify-card p-2 mb-2 bg-white rounded-lg shadow-sm flex items-center justify-between">
		<!-- 头像与信息 -->
		<view class="flex items-center space-x-2 flex-1 min-w-0">
			<image :src="item.avatar" class="w-8 h-8 rounded-full object-cover flex-shrink-0 border border-gray-200" mode="aspectFill"></image>
			<view class="flex-1 min-w-0"  >
				<text class="font-medium text-sm truncate">{{ item.name }}</text>
				<text class="block text-xs text-gray-400 mt-0.5">{{ formattedTime }}</text>
			</view>
		</view>

		<!-- 操作按钮 / 状态 -->
		<view class="ml-2 flex-shrink-0">
			<template v-if="item.status === 'received'">
				<view class="flex space-x-1">
					<button @click="handleAccept" class="btn btn-accept">同意</button>
					<button @click="handleReject" class="btn btn-reject">拒绝</button>
				</view>
			</template>

			<template v-else-if="item.status === 'sent'">
				<text class="text-yellow-600 font-medium text-xs px-1.5 py-0.5 rounded bg-yellow-100">已发送</text>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	computed: {
		formattedTime() {
			const now = new Date();
			const time = new Date(this.item.time);
			const diff = Math.floor((now - time) / 1000 / 60); // 分钟差

			if (diff < 1) return '刚刚';
			if (diff < 60) return `${diff}分钟前`;
			if (diff < 1440) return `${Math.floor(diff / 60)}小时前`;
			return this.formatFullDate(time);
		}
	},
	methods: {
		handleAccept() {
			this.$emit('action', { id: this.item.id, action: 'accept' });
		},
		handleReject() {
			this.$emit('action', { id: this.item.id, action: 'reject' });
		},
		formatFullDate(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style scoped>
.verify-card {
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	padding: 0.5rem; /* 减少内边距 */
}

/* 按钮统一样式 */
.btn {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	color: white;
	font-weight: 500;
	flex-shrink: 0;
	transition: all 0.2s ease-in-out;
}

.btn:hover {
	opacity: 0.9;
}

.btn-accept {
	background-color: #10b981; /* green-500 */
}

.btn-reject {
	background-color: #ef4444; /* red-500 */
}
</style>